import { getLocation } from "@/api/map";
import { reactive, watchEffect } from "vue";

const getQueryVariable = () => {
  const paramsStr = (location.href.split('?')[1] || '').split('#')[0]
  if (!paramsStr) return {};
  let params = {};
  paramsStr.split('&').map(str => {
    const [k, v] = str.split('=')
    params[k] = v
  })
  return params
}

const mapState = reactive({
  startPos: '',
  currentPos: '',
  area: '',
  currentId: '',
  currentPolygon: null,
  zoom: 12,
  centerPos: {
  },
  selectedIdList: [],
  totalPolygon: [],
  siteList: []
})

const defaultPolygonOption = {
  weight: 3,
  opacity: 0.5,
  fillColor: '#3B60E6',
  color: '#3B60E6',
  fillOpacity: 0.2,
  lineStyle: 'solid'
}

const handlePolygonClick = (params = { type, target, lnglat, containerPoint }, callback) => {
  try {
    if (mapState.currentPolygon) {
      mapState.currentPolygon.setOpacity(0.5)
    }
    mapState.currentPolygon = params.target
    mapState.currentPolygon.setOpacity(0.8)
    mapState.area = params.target.options.area
    mapState.currentId = params.target.options.id
    callback && callback()
  } catch (error) {

  }

}

const isRedirectToDetail = (id) => {
  if (window.hasRedirect) return; 
  window.hasRedirect = true; 
  const params = getQueryVariable();
  if (String (id) === String (params.polygonId))
    return true
  return false
}

const handleCenter = () => {
  const langlats = Array.from(mapState.currentPolygon.getLngLats()[0])
  window.map.setViewport(langlats)
}

const handlePolygonSelect = (currentId) => {
  const index = mapState.selectedIdList.findIndex(id => id === currentId)
  if (index === -1) {
    mapState.selectedIdList.push(currentId)
  } else {
    mapState.selectedIdList.splice(index, 1)
  }
  mapState.totalPolygon.map(v => {
    if (mapState.selectedIdList.find(id => id === v.options.id)) {
      v.setColor('#FF5353')
      v.setLineStyle('dashed')
    } else {
      const _c = v.getFillColor();
      v.setColor(_c)
      v.setLineStyle('solid')
    }
  })
}

const clearSelectedIdList = () => {
  mapState.selectedIdList = []
  mapState.totalPolygon.map(v => {
    if (mapState.selectedIdList.find(id => id === v.options.id)) {
      v.setColor('#FF5353')
      v.setLineStyle('dashed')
    } else {
      const _c = v.getFillColor();
      v.setColor(_c)
      v.setLineStyle('solid')
    }
  })
}


const loadMap = async (id) => {
  try {
    //初始化地图对象
    const map = new T.Map(id);
    window.map = map
    // const lngLat = await window.requestLocation ()
    //设置显示地图的中心点和级别
    const { longitude, latitude } = await getLocation()

    map.centerAndZoom(new T.LngLat(longitude, latitude), mapState.zoom);
    // map.centerAndZoom(new T.LngLat(104.073571, 30.407466), mapState.zoom);
    return map;
  } catch (error) {
    console.error(error);
    alert(error)
  }

}

const initMapState = () => {
  mapState.startPos = '';
  mapState.currentPos = '';
  mapState.area = '';
  mapState.currentId = '';
  mapState.currentPolygon = null;
  mapState.zoom = 12;
  mapState.centerPos = {}
}


export {
  mapState, handlePolygonClick, handlePolygonSelect, defaultPolygonOption, loadMap,
  initMapState, handleCenter, clearSelectedIdList, isRedirectToDetail
}